<template>
	<view class="refund">
		<!-- 商品 -->
		<view class="row">
			<view class="carrier">
				<view class="left">
					<image class="image" :src="info.ProductImage"></image>
				</view>
				<view class="mid">
					<view class="title in2line">{{info.ProductName}}</view>
					<view class="data" style="height: 20rpx;"></view>
					<view class="bottom">
						<text class="price text-rf">￥{{info.SinglePrice || ''}}</text>
						<text>x{{info.Quantity || ''}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="product-textarea">
			<form @submit="handleOrderRefundApply">
				<picker :range="msgContents" @change="change">
					<list-cell title="退款原因" :tips="form.reason || '请选择'"></list-cell>
				</picker>
				<textarea class="textarea" v-model="form.describe" placeholder-style="color:#ccc; font-size: 26upx"
					placeholder="宝贝不满足您的期待吗？请填写一下您的退货/退款理由吧" />
				<view class="feedback-title">
					<text>退款金额</text>
					<text :class="'text-rf'">￥{{info.TotalPrice || ''}}</text>
				</view>
				<view class="feedback-content">
					<text>成功退款后，该订单的金额会退回至原支付账户</text>
				</view>
				<view class="feedback-title">
					<text>上传凭证(选填,提供至多9张截图,总大小10M以下)</text>
				</view>
				<view class="layout">
					<view class="layout-img">
						<view class="layout-img-list">
							<view class="layout-img-list-item" v-for="(it,index) in fileList" :key="it.url">
								<image :src="it.url" mode="" class="layout-img-list-item-image" mode="aspectFill"
									v-if="$getIsImage(it.url) === 1"></image>
								<video :src="it.url" v-if="$getIsImage(it.url) === 2"
									style="border-radius: 20rpx;"></video>
								<image :src="ossUrl + `/static/15.png`" mode="" class="layout-img-list-item-del"
									@click="delImg(index)"></image>
							</view>
							<view class="layout-img-list-add" @click="selectClick">
								<image :src="ossUrl + `/static/5.png`" mode=""></image>
							</view>
						</view>
					</view>
					<!-- <view class="layout-icon">
						<image :src="ossUrl + `/static/2.png`" mode="" @click="show"></image>
					</view> -->
				</view>
				<button class="confirm-btn" formType="submit" :class="'text-rf'" @click="submit(1)">
					仅退款
				</button>
				<button class="confirm-btn" formType="submit" :class="'bg-rf'" @click="submit(2)">
					退货退款
				</button>
			</form>
		</view>
	</view>
</template>
<script>
	import {
		uploadImg,
		uploadImgs,
		uploadVideo,
		uploadDel
	} from '@/common/upload.js'
	import {goodsApplyForReturn} from '@/common/http/api.js'
	import listCell from '@/pagesA/components/rf-list-cell';
	export default {
		components: {
			listCell
		},
		data() {
			return {
				fileList: [],
				msgContents: [
					'商品信息描述不符',
					'退运费',
					'质量问题',
					'少件含缺少配件',
					'包装/商品损坏/污渍',
					'未按约定时间发货',
					'发票问题',
					'卖家发错货',
					'其他'
				],
				form:{
					id: '',
					reason:'',
					describe: '',
					picture: '',
					type: '', //1是仅退款 2是退货退款
				},
				info:''
			};
		},
		onLoad(e) {
			this.form.id = e.id
			this.info = uni.getStorageSync('refundOrder')
		},
		methods: {
			submit(e){
				if(this.form.reason === '') {
					uni.showToast({duration:3000,
						title: "请选择退款原因！",
						icon: 'none'
					})
					return
				}
				let data = {
					...this.form,
					picture: this.fileList.map(i=>i.url).join(','),
          type: e
				}
				uni.showLoading()
				goodsApplyForReturn(data).then(res=>{
					uni.hideLoading()
					uni.showToast({duration:3000,
						title: "提交成功！",
						icon: 'none'
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
					
				})
			},
			change(e){
				console.log('e',e)
				this.form.reason = this.msgContents[e.detail.value]
			},
			// 上传
			selectClick() {
				uni.chooseImage({
					success: (res) => {
						const tempFiles = res.tempFiles;
						console.log('图片', tempFiles, res)
						if (this.fileList.length + tempFiles.length > 9) {
							uni.showToast({duration:3000,
								title: "最多上传9个！",
								icon: 'none'
							})
							return
						}
						this.handler(tempFiles)
					},
					fail: (err) => {
						console.error('选择图片失败', err);
						uni.showToast({duration:3000,
							title: '选择图片失败',
							icon: 'none'
						})
						reject({
							msg: '选择图片失败',
							data: err
						})
					}
				});
			},
			async handler(tempFiles) {
				for (let i = 0; i < tempFiles.length; i++) {
					const res = await uploadImgs(tempFiles[i])
					this.fileList = [...this.fileList, res.data]
					console.log('i', i)
				}
			},
		}
	};
</script>
<style lang="scss">
	page {
		background: $color-white;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.refund {
		background-color: $color-white;
		/*  #ifndef H5  */
		height: 100vh;
		padding-top: 20rpx;

		/*  #endif  */
		.row {
			margin: 0 auto $spacing-lg;
			width: calc(94%);
			height: calc(22vw + 40upx);
			border-radius: 15upx;
			box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			position: relative;
			overflow: hidden;
			z-index: 4;
			border: 0;

			.carrier {
				@keyframes showMenu {
					0% {
						transform: translateX(0);
					}

					100% {
						transform: translateX(-30%);
					}
				}

				@keyframes closeMenu {
					0% {
						transform: translateX(-30%);
					}

					100% {
						transform: translateX(0);
					}
				}

				&.open {
					animation: showMenu 0.25s linear both;
				}

				&.close {
					animation: closeMenu 0.15s linear both;
				}

				background-color: #fff;
				position: absolute;
				width: 100%;
				padding: 0 0;
				height: 100%;
				z-index: 3;
				display: flex;
				align-items: center;

				.left {
					width: 22vw;
					height: 22vw;
					margin-left: 20upx;
					margin-right: 10upx;

					.image {
						border-radius: 10upx;
						width: 22vw;
						height: 22vw;
					}
				}

				.mid {
					text-align: left;
					width: 100%;
					margin: 10upx 10upx 0;

					.title {
						color: $font-color-dark;
						height: 60upx;
						line-height: 1.2;
						font-size: $font-base;
					}

					.data {
						width: 100%;
						display: flex;
						align-items: center;
						margin: 10upx 0 5upx;
						font-size: $font-base;
						color: $font-color-base;

						.item {
							flex: 1;
						}

						.iconfont {
							color: $font-color-light;
							margin-right: 10upx;
						}

						.status {
							padding: 6upx 20upx;
							background-color: $base-color;
							opacity: 0.8;
							color: $color-white;
							font-size: $font-sm;
							border-radius: 6upx;
						}
					}

					.bottom {
						line-height: 1.2;
						width: 100%;
						display: flex;
						justify-content: space-between;
						padding-right: 30rpx;
						box-sizing: border-box;
						align-items: center;
						font-size: $font-sm;
						color: $font-color-light;

						.price {
							font-size: $font-lg;
						}

						text {
							font-size: 28rpx;
						}
					}
				}

				.data {
					color: $font-color-light;
				}
			}
		}

		.product-textarea {
			margin: $spacing-base 0 0;

			.gender-item {
				.gender-item-radio {
					transform: scale(0.9);
				}

				.gender-item-text {
					margin: 0 $spacing-base 0 $spacing-sm;
				}
			}

			.refund-type {
				margin: $spacing-base $spacing-lg;
			}

			.textarea {
				width: 100%;
				height: 150upx;
				padding: 0 $spacing-lg;
				box-sizing: border-box;
			}
		}

		.confirm-btn {
			width: 630upx;
			height: 76upx;
			line-height: 76upx;
			border-radius: 50px;
			margin-top: 50upx;
			font-size: $font-lg;

			&:after {
				border-radius: 100px;
			}
		}

		/*问题反馈*/
		.feedback-title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: $spacing-base $spacing-lg;
			font-size: $font-base;
			border-bottom: 1upx solid rgba(0, 0, 0, 0.05);
		}

		.feedback-content {
			padding: $spacing-base $spacing-lg;
			color: $font-color-light;
		}

		.feedback-body {
			background: $color-white;
			padding: $spacing-base $spacing-lg;

			.gender-item {
				margin-right: 20upx;

				.gender-item-text {
					padding-left: 10upx;
				}

				radio .wx-radio-input.wx-radio-input-checked {
					background: $uni-color-primary;
					border-color: $uni-color-primary;
				}
			}
		}
	}

	.text-rf {
		color: #fa436a;
	}

	.bg-rf {
		background-color: #fa436a;
		color: #ffffff;
	}

	.layout {
		width: 671rpx;
		padding-top: 30rpx;
		display: flex;
		align-items: flex-end;
		margin: 0 auto;
		margin-bottom: 56rpx;

		.layout-img {
			flex: 1;
			min-width: 0;

			.layout-img-list {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				&>view {
					margin-right: 15rpx;
					margin-bottom: 15rpx;
				}
			}

			.layout-img-list-add {
				width: 151rpx;
				height: 151rpx;
				border-radius: 20rpx;
				border: 1px solid #999999;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 48rpx;
					height: 49rpx;
				}
			}

			.layout-img-list-item {
				width: 151rpx;
				height: 151rpx;
				position: relative;

				.layout-img-list-item-image {
					border-radius: 20rpx;
				}

				.layout-img-list-item-del {
					width: 38rpx;
					height: 38rpx;
					position: absolute;
					top: -15rpx;
					right: -15rpx;
					z-index: 2;
				}
			}
		}

		.layout-icon {
			width: 39rpx;
			height: 40rpx;
			margin-bottom: 15rpx;
		}
	}
</style>